<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>济南市长清区孝里初级中学学生请假系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E40AF',
                        secondary: '#3B82F6',
                        accent: '#60A5FA',
                        neutral: '#F3F4F6',
                        success: '#10B981',
                        warning: '#F59E0B',
                        danger: '#EF4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .transition-smooth {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md">
        <div class="container mx-auto px-4 py-4">
            <h1 class="text-2xl md:text-3xl font-bold text-center">
                济南市长清区孝里初级中学学生请假系统
            </h1>
            <p class="text-center text-blue-100 mt-1">伙食费自动计算与请假管理</p>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 操作选项卡 -->
        <div class="mb-6 border-b border-gray-200">
            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="tabList" role="tablist">
                <li class="mr-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 border-primary text-primary rounded-t-lg" id="leave-tab" data-tab="leave-form" type="button" role="tab" aria-selected="true">
                        <i class="fa fa-pencil-square-o mr-1"></i>填写请假信息
                    </button>
                </li>
                <li class="mr-2" role="presentation">
                    <button class="inline-block p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 rounded-t-lg" id="student-tab" data-tab="student-management" type="button" role="tab" aria-selected="false">
                        <i class="fa fa-users mr-1"></i>学生信息管理
                    </button>
                </li>
                <li role="presentation">
                    <button class="inline-block p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 rounded-t-lg" id="report-tab" data-tab="report-generation" type="button" role="tab" aria-selected="false">
                        <i class="fa fa-file-text-o mr-1"></i>生成报表
                    </button>
                </li>
            </ul>
        </div>

        <!-- 请假信息填写表单 -->
        <div id="leave-form" class="tab-content block">
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">学生请假登记</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="mb-4">
                            <label for="class-select" class="block text-gray-700 font-medium mb-2">班级 <span class="text-red-500">*</span></label>
                            <select id="class-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="">请选择班级</option>
                                <option value="2023级1班">2023级1班</option>
                                <option value="2023级2班">2023级2班</option>
                                <option value="2023级3班">2023级3班</option>
                                <option value="2023级4班">2023级4班</option>
                                <option value="2024级1班">2024级1班</option>
                                <option value="2024级2班">2024级2班</option>
                                <option value="2024级3班">2024级3班</option>
                                <option value="2024级4班">2024级4班</option>
                                <option value="2025级1班">2025级1班</option>
                                <option value="2025级2班">2025级2班</option>
                                <option value="2025级3班">2025级3班</option>
                                <option value="2025级4班">2025级4班</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="student-select" class="block text-gray-700 font-medium mb-2">学生 <span class="text-red-500">*</span></label>
                            <select id="student-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="">请先选择班级</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="leave-date" class="block text-gray-700 font-medium mb-2">请假日期 <span class="text-red-500">*</span></label>
                            <input type="date" id="leave-date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-gray-700 font-medium mb-2">请假餐次 <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-2 gap-2">
                                <label class="flex items-center p-2 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" name="meal-type" value="breakfast" class="mr-2"> 早餐
                                </label>
                                <label class="flex items-center p-2 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" name="meal-type" value="lunch" class="mr-2"> 午餐
                                </label>
                                <label class="flex items-center p-2 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" name="meal-type" value="dinner" class="mr-2"> 晚餐
                                </label>
                                <label class="flex items-center p-2 border border-gray-200 rounded-md hover:bg-gray-50 cursor-pointer">
                                    <input type="checkbox" name="meal-type" value="all-day" class="mr-2"> 全天
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="mb-4">
                            <label for="meal-plan" class="block text-gray-700 font-medium mb-2">用餐类型 <span class="text-red-500">*</span></label>
                            <select id="meal-plan" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="three-meals">在校三餐 (20元/天)</option>
                                <option value="breakfast-only">只吃早餐 (4元/天)</option>
                                <option value="lunch-only">只吃午餐 (10元/天)</option>
                                <option value="dinner-only">只吃晚餐 (6元/天)</option>
                                <option value="no-meals">不在校就餐 (0元/天)</option>
                            </select>
                        </div>
                        
                        <div class="mb-4">
                            <label for="leave-reason" class="block text-gray-700 font-medium mb-2">请假原因</label>
                            <textarea id="leave-reason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入请假原因（可选）"></textarea>
                        </div>
                        
                        <div class="mb-4">
                            <label for="notes" class="block text-gray-700 font-medium mb-2">备注</label>
                            <textarea id="notes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="其他需要说明的情况（可选）"></textarea>
                        </div>
                        
                        <div class="mb-4">
                            <label for="teacher-name" class="block text-gray-700 font-medium mb-2">班主任姓名 <span class="text-red-500">*</span></label>
                            <input type="text" id="teacher-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的姓名">
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 text-center">
                    <button id="submit-leave" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-8 rounded-md transition-smooth shadow-md hover:shadow-lg flex items-center mx-auto">
                        <i class="fa fa-check mr-2"></i>提交请假信息
                    </button>
                </div>
            </div>
            
            <!-- 最近请假记录 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">
                    <i class="fa fa-history mr-2"></i>最近请假记录
                </h2>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学生</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假餐次</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="recent-leaves" class="bg-white divide-y divide-gray-200">
                            <!-- 最近请假记录将通过JavaScript动态填充 -->
                            <tr>
                                <td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无请假记录</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 学生信息管理 -->
        <div id="student-management" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">学生信息管理</h2>
                
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">批量导入学生信息</h3>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                        <p class="mb-4 text-gray-600">拖放Excel或CSV文件到此处，或点击选择文件</p>
                        <p class="text-sm text-gray-500 mb-4">支持格式: .xlsx, .xls, .csv (请使用提供的模板格式)</p>
                        <input type="file" id="student-import" accept=".xlsx,.xls,.csv" class="hidden">
                        <button onclick="document.getElementById('student-import').click()" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-md transition-smooth mr-3">
                            <i class="fa fa-file-excel-o mr-2"></i>选择文件
                        </button>
                        <a href="#" id="download-template" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-md transition-smooth">
                            <i class="fa fa-download mr-2"></i>下载导入模板
                        </a>
                    </div>
                    
                    <!-- 导入进度和结果显示区域 -->
                    <div id="import-result" class="mt-4 hidden">
                        <div class="p-4 rounded-md border" id="import-result-content"></div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="text-lg font-medium text-gray-700">已导入学生信息</h3>
                        <button id="clear-all-students" class="bg-danger hover:bg-danger/90 text-white font-medium py-1 px-4 rounded-md transition-smooth text-sm">
                            <i class="fa fa-trash mr-1"></i>清空所有学生
                        </button>
                    </div>
                    
                    <div class="mb-4">
                        <select id="class-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent mr-2">
                            <option value="all">所有班级</option>
                            <option value="2023级1班">2023级1班</option>
                            <option value="2023级2班">2023级2班</option>
                            <option value="2023级3班">2023级3班</option>
                            <option value="2023级4班">2023级4班</option>
                            <option value="2024级1班">2024级1班</option>
                            <option value="2024级2班">2024级2班</option>
                            <option value="2024级3班">2024级3班</option>
                            <option value="2024级4班">2024级4班</option>
                            <option value="2025级1班">2025级1班</option>
                            <option value="2025级2班">2025级2班</option>
                            <option value="2025级3班">2025级3班</option>
                            <option value="2025级4班">2025级4班</option>
                        </select>
                        <input type="text" id="student-search" placeholder="搜索学生姓名或学号..." class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用餐类型</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="student-list" class="bg-white divide-y divide-gray-200">
                                <!-- 学生列表将通过JavaScript动态填充 -->
                                <tr>
                                    <td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无学生信息，请导入学生数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="border-t pt-4">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">添加单个学生</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="student-id" class="block text-gray-700 font-medium mb-1">学号 <span class="text-red-500">*</span></label>
                            <input type="text" id="student-id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入学号">
                        </div>
                        <div>
                            <label for="student-name" class="block text-gray-700 font-medium mb-1">姓名 <span class="text-red-500">*</span></label>
                            <input type="text" id="student-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入姓名">
                        </div>
                        <div>
                            <label for="student-class" class="block text-gray-700 font-medium mb-1">班级 <span class="text-red-500">*</span></label>
                            <select id="student-class" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="2023级1班">2023级1班</option>
                                <option value="2023级2班">2023级2班</option>
                                <option value="2023级3班">2023级3班</option>
                                <option value="2023级4班">2023级4班</option>
                                <option value="2024级1班">2024级1班</option>
                                <option value="2024级2班">2024级2班</option>
                                <option value="2024级3班">2024级3班</option>
                                <option value="2024级4班">2024级4班</option>
                                <option value="2025级1班">2025级1班</option>
                                <option value="2025级2班">2025级2班</option>
                                <option value="2025级3班">2025级3班</option>
                                <option value="2025级4班">2025级4班</option>
                            </select>
                        </div>
                        <div class="md:col-span-3">
                            <label for="student-meal-plan" class="block text-gray-700 font-medium mb-1">用餐类型 <span class="text-red-500">*</span></label>
                            <select id="student-meal-plan" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="three-meals">在校三餐 (20元/天)</option>
                                <option value="breakfast-only">只吃早餐 (4元/天)</option>
                                <option value="lunch-only">只吃午餐 (10元/天)</option>
                                <option value="dinner-only">只吃晚餐 (6元/天)</option>
                                <option value="no-meals">不在校就餐 (0元/天)</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-4 text-right">
                        <button id="add-student" class="bg-success hover:bg-success/90 text-white font-medium py-2 px-6 rounded-md transition-smooth">
                            <i class="fa fa-plus mr-2"></i>添加学生
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 报表生成 -->
        <div id="report-generation" class="tab-content hidden">
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">生成餐费报表</h2>
                
                <div class="mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div>
                            <label for="report-month" class="block text-gray-700 font-medium mb-1">报表月份 <span class="text-red-500">*</span></label>
                            <input type="month" id="report-month" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        <div>
                            <label for="school-days" class="block text-gray-700 font-medium mb-1">本月工作日天数 <span class="text-red-500">*</span></label>
                            <input type="number" id="school-days" min="1" max="31" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        <div>
                            <label for="report-class" class="block text-gray-700 font-medium mb-1">班级筛选</label>
                            <select id="report-class" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="all">所有班级</option>
                                <option value="2023级1班">2023级1班</option>
                                <option value="2023级2班">2023级2班</option>
                                <option value="2023级3班">2023级3班</option>
                                <option value="2023级4班">2023级4班</option>
                                <option value="2024级1班">2024级1班</option>
                                <option value="2024级2班">2024级2班</option>
                                <option value="2024级3班">2024级3班</option>
                                <option value="2024级4班">2024级4班</option>
                                <option value="2025级1班">2025级1班</option>
                                <option value="2025级2班">2025级2班</option>
                                <option value="2025级3班">2025级3班</option>
                                <option value="2025级4班">2025级4班</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button id="generate-report" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-8 rounded-md transition-smooth shadow-md hover:shadow-lg flex items-center mx-auto">
                            <i class="fa fa-bar-chart mr-2"></i>生成月度餐费报表
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 报表结果 -->
            <div id="report-result" class="bg-white rounded-lg shadow-md p-6 hidden">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-gray-800" id="report-title">2023年9月学生餐费报表</h2>
                    <div>
                        <button id="print-report" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-1 px-4 rounded-md transition-smooth text-sm mr-2">
                            <i class="fa fa-print mr-1"></i>打印报表
                        </button>
                        <button id="export-report" class="bg-success hover:bg-success/90 text-white font-medium py-1 px-4 rounded-md transition-smooth text-sm">
                            <i class="fa fa-file-excel-o mr-1"></i>导出Excel
                        </button>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">报表统计</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                            <p class="text-sm text-blue-600">总学生数</p>
                            <p class="text-2xl font-bold text-gray-800" id="total-students">0</p>
                        </div>
                        <div class="bg-green-50 p-4 rounded-lg border border-green-100">
                            <p class="text-sm text-green-600">总应收金额</p>
                            <p class="text-2xl font-bold text-gray-800" id="total-amount">¥0.00</p>
                        </div>
                        <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
                            <p class="text-sm text-yellow-600">总请假天数</p>
                            <p class="text-2xl font-bold text-gray-800" id="total-leave-days">0</p>
                        </div>
                        <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                            <p class="text-sm text-red-600">总减免金额</p>
                            <p class="text-2xl font-bold text-gray-800" id="total-deduction">¥0.00</p>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <h3 class="text-lg font-medium mb-3 text-gray-700">餐费明细</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用餐类型</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假天数</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">减免金额</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应付金额</th>
                                </tr>
                            </thead>
                            <tbody id="report-details" class="bg-white divide-y divide-gray-200">
                                <!-- 报表数据将通过JavaScript动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="border-t pt-4 mt-4">
                    <div class="flex justify-between">
                        <div>
                            <p class="text-gray-600">生成日期: <span id="report-date"></span></p>
                        </div>
                        <div class="text-right">
                            <p class="text-gray-600">管理员签字: _______________</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-6 mt-10">
        <div class="container mx-auto px-4 text-center">
            <p>济南市长清区孝里初级中学学生请假系统 &copy; 2023</p>
            <p class="text-gray-400 text-sm mt-1">用于学生请假管理及餐费计算</p>
        </div>
    </footer>

    <!-- 通知提示框 -->
    <div id="notification" class="fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center">
        <i id="notification-icon" class="mr-2"></i>
        <span id="notification-message"></span>
    </div>

    <!-- 导入进度模态框 -->
    <div id="import-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-md w-full">
            <h3 class="text-lg font-semibold mb-4 text-gray-800">正在导入学生信息</h3>
            <div class="mb-4">
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div id="import-progress" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
                </div>
                <p id="import-status" class="text-sm text-gray-600 mt-2">准备导入...</p>
            </div>
        </div>
    </div>

    <script>
        // 数据存储与管理
        const DataManager = {
            // 初始化本地存储
            init() {
                if (!localStorage.getItem('students')) {
                    localStorage.setItem('students', JSON.stringify([]));
                }
                if (!localStorage.getItem('leaves')) {
                    localStorage.setItem('leaves', JSON.stringify([]));
                }
            },
            
            // 学生数据管理
            getStudents() {
                return JSON.parse(localStorage.getItem('students') || '[]');
            },
            
            saveStudent(student) {
                const students = this.getStudents();
                // 检查是否已存在相同学号的学生
                const existingIndex = students.findIndex(s => s.id === student.id);
                if (existingIndex >= 0) {
                    students[existingIndex] = student; // 更新现有学生
                    return { saved: true, updated: true };
                } else {
                    students.push(student); // 添加新学生
                    return { saved: true, updated: false };
                }
                localStorage.setItem('students', JSON.stringify(students));
                return true;
            },
            
            saveStudents(students) {
                const existingStudents = this.getStudents();
                let newCount = 0;
                let updatedCount = 0;
                
                students.forEach(student => {
                    const existingIndex = existingStudents.findIndex(s => s.id === student.id);
                    if (existingIndex >= 0) {
                        existingStudents[existingIndex] = student;
                        updatedCount++;
                    } else {
                        existingStudents.push(student);
                        newCount++;
                    }
                });
                
                localStorage.setItem('students', JSON.stringify(existingStudents));
                return { newCount, updatedCount };
            },
            
            deleteStudent(studentId) {
                let students = this.getStudents();
                students = students.filter(s => s.id !== studentId);
                localStorage.setItem('students', JSON.stringify(students));
                return true;
            },
            
            clearAllStudents() {
                localStorage.setItem('students', JSON.stringify([]));
                return true;
            },
            
            getStudentsByClass(className) {
                return this.getStudents().filter(s => s.class === className);
            },
            
            // 请假数据管理
            getLeaves() {
                return JSON.parse(localStorage.getItem('leaves') || '[]');
            },
            
            saveLeave(leave) {
                const leaves = this.getLeaves();
                leaves.push({
                    id: Date.now().toString(), // 使用时间戳作为唯一ID
                    ...leave,
                    createdAt: new Date().toISOString()
                });
                localStorage.setItem('leaves', JSON.stringify(leaves));
                return true;
            },
            
            deleteLeave(leaveId) {
                let leaves = this.getLeaves();
                leaves = leaves.filter(l => l.id !== leaveId);
                localStorage.setItem('leaves', JSON.stringify(leaves));
                return true;
            },
            
            getLeavesByMonth(month) {
                const yearMonth = month.split('-').slice(0, 2).join('-'); // 格式化为YYYY-MM
                return this.getLeaves().filter(leave => {
                    const leaveDate = new Date(leave.date);
                    return `${leaveDate.getFullYear()}-${String(leaveDate.getMonth() + 1).padStart(2, '0')}` === yearMonth;
                });
            },
            
            getLeavesByStudent(studentId, month) {
                const leaves = this.getLeavesByMonth(month);
                return leaves.filter(leave => leave.studentId === studentId);
            }
        };

        // 工具函数
        const Utils = {
            // 格式化日期
            formatDate(dateString) {
                const date = new Date(dateString);
                return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
            },
            
            // 获取当前月份
            getCurrentMonth() {
                const now = new Date();
                return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
            },
            
            // 计算当月工作日天数（简化版，实际应用中可能需要更复杂的计算）
            getWorkdaysInMonth(month) {
                const [year, monthNum] = month.split('-').map(Number);
                const daysInMonth = new Date(year, monthNum, 0).getDate();
                let workdays = 0;
                
                for (let day = 1; day <= daysInMonth; day++) {
                    const date = new Date(year, monthNum - 1, day);
                    const dayOfWeek = date.getDay();
                    // 排除周六和周日
                    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
                        workdays++;
                    }
                }
                
                return workdays;
            },
            
            // 获取餐费金额
            getMealPrice(mealType) {
                const prices = {
                    'three-meals': 20,
                    'breakfast-only': 4,
                    'lunch-only': 10,
                    'dinner-only': 6,
                    'no-meals': 0
                };
                return prices[mealType] || 0;
            },
            
            // 获取餐类型文本
            getMealTypeText(mealType) {
                const texts = {
                    'three-meals': '在校三餐',
                    'breakfast-only': '只吃早餐',
                    'lunch-only': '只吃午餐',
                    'dinner-only': '只吃晚餐',
                    'no-meals': '不在校就餐'
                };
                return texts[mealType] || '';
            },
            
            // 显示通知
            showNotification(message, type = 'success') {
                const notification = document.getElementById('notification');
                const icon = document.getElementById('notification-icon');
                const messageEl = document.getElementById('notification-message');
                
                // 设置通知类型样式
                notification.className = 'fixed bottom-5 right-5 px-6 py-3 rounded-lg shadow-lg transform translate-y-0 opacity-100 transition-all duration-300 flex items-center';
                if (type === 'success') {
                    notification.classList.add('bg-success', 'text-white');
                    icon.className = 'fa fa-check-circle mr-2';
                } else if (type === 'error') {
                    notification.classList.add('bg-danger', 'text-white');
                    icon.className = 'fa fa-exclamation-circle mr-2';
                } else if (type === 'warning') {
                    notification.classList.add('bg-warning', 'text-white');
                    icon.className = 'fa fa-exclamation-triangle mr-2';
                } else {
                    notification.classList.add('bg-gray-700', 'text-white');
                    icon.className = 'fa fa-info-circle mr-2';
                }
                
                messageEl.textContent = message;
                
                // 3秒后隐藏通知
                setTimeout(() => {
                    notification.classList.remove('translate-y-0', 'opacity-100');
                    notification.classList.add('translate-y-20', 'opacity-0');
                }, 3000);
            },
            
            // 生成导入模板
            generateImportTemplate() {
                // 创建CSV内容并下载
                const csvContent = "学号,姓名,班级,用餐类型\n" +
                                  "2023001,张三,2023级1班,在校三餐\n" +
                                  "2023002,李四,2023级1班,只吃午餐\n" +
                                  "2024001,王五,2024级1班,在校三餐\n";
                
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.setAttribute('href', url);
                link.setAttribute('download', '学生信息导入模板.csv');
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
            
            // 解析用餐类型文本为系统值
            parseMealType(text) {
                const mealMap = {
                    '在校三餐': 'three-meals',
                    '只吃早餐': 'breakfast-only',
                    '只吃午餐': 'lunch-only',
                    '只吃晚餐': 'dinner-only',
                    '不在校就餐': 'no-meals'
                };
                return mealMap[text.trim()] || 'three-meals';
            },
            
            // 验证班级是否有效
            isValidClass(className) {
                const validClasses = [
                    '2023级1班', '2023级2班', '2023级3班', '2023级4班',
                    '2024级1班', '2024级2班', '2024级3班', '2024级4班',
                    '2025级1班', '2025级2班', '2025级3班', '2025级4班'
                ];
                return validClasses.includes(className);
            }
        };

        // 页面渲染与交互
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化数据存储
            DataManager.init();
            
            // 初始化页面
            initTabs();
            initStudentManagement();
            initLeaveForm();
            initReportGeneration();
            loadRecentLeaves();
            loadStudentList();
            
            // 设置当前月份为默认报表月份
            const today = new Date();
            const currentMonth = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
            document.getElementById('report-month').value = currentMonth;
            
            // 计算并设置当月工作日天数
            const workdays = Utils.getWorkdaysInMonth(currentMonth);
            document.getElementById('school-days').value = workdays;
        });

        // 初始化选项卡切换
        function initTabs() {
            const tabButtons = document.querySelectorAll('#tabList button');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // 移除所有选项卡的选中状态
                    tabButtons.forEach(btn => {
                        btn.classList.remove('border-primary', 'text-primary');
                        btn.classList.add('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                        btn.setAttribute('aria-selected', 'false');
                    });
                    
                    // 设置当前选项卡为选中状态
                    button.classList.remove('border-transparent', 'hover:text-gray-600', 'hover:border-gray-300');
                    button.classList.add('border-primary', 'text-primary');
                    button.setAttribute('aria-selected', 'true');
                    
                    // 隐藏所有内容区域
                    document.querySelectorAll('.tab-content').forEach(content => {
                        content.classList.add('hidden');
                    });
                    
                    // 显示当前选项卡对应的内容区域
                    const tabId = button.getAttribute('data-tab');
                    document.getElementById(tabId).classList.remove('hidden');
                });
            });
        }

        // 初始化学生管理功能
        function initStudentManagement() {
            // 下载模板
            document.getElementById('download-template').addEventListener('click', function(e) {
                e.preventDefault();
                Utils.generateImportTemplate();
                Utils.showNotification('导入模板已下载，请按照模板格式填写学生信息');
            });
            
            // 导入学生信息（增强版，带解析和反馈）
            document.getElementById('student-import').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (!file) return;
                
                // 检查文件类型
                const fileName = file.name.toLowerCase();
                if (!fileName.endsWith('.csv') && !fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                    Utils.showNotification('请选择CSV或Excel格式的文件', 'error');
                    e.target.value = '';
                    return;
                }
                
                // 显示导入进度模态框
                const importModal = document.getElementById('import-modal');
                const importProgress = document.getElementById('import-progress');
                const importStatus = document.getElementById('import-status');
                importModal.classList.remove('hidden');
                importProgress.style.width = '10%';
                importStatus.textContent = '正在解析文件...';
                
                // 处理CSV文件
                if (fileName.endsWith('.csv')) {
                    const reader = new FileReader();
                    
                    reader.onload = function(event) {
                        try {
                            // 解析CSV
                            importProgress.style.width = '30%';
                            importStatus.textContent = '正在解析CSV内容...';
                            
                            const results = Papa.parse(event.target.result, {
                                header: true,
                                skipEmptyLines: true
                            });
                            
                            if (results.errors && results.errors.length > 0) {
                                throw new Error(`CSV解析错误: ${results.errors[0].message}`);
                            }
                            
                            if (!results.data || results.data.length === 0) {
                                throw new Error('未找到有效数据，请检查文件格式');
                            }
                            
                            // 验证表头
                            const requiredHeaders = ['学号', '姓名', '班级', '用餐类型'];
                            const headers = Object.keys(results.data[0]);
                            const missingHeaders = requiredHeaders.filter(h => !headers.includes(h));
                            
                            if (missingHeaders.length > 0) {
                                throw new Error(`CSV文件缺少必要的列: ${missingHeaders.join(', ')}`);
                            }
                            
                            // 处理数据
                            importProgress.style.width = '50%';
                            importStatus.textContent = '正在验证数据...';
                            
                            const students = [];
                            const errors = [];
                            
                            results.data.forEach((row, index) => {
                                const rowNumber = index + 2; // 行号从2开始（包含表头）
                                
                                // 验证必填字段
                                if (!row['学号'] || !row['学号'].trim()) {
                                    errors.push(`第${rowNumber}行: 学号不能为空`);
                                    return;
                                }
                                
                                if (!row['姓名'] || !row['姓名'].trim()) {
                                    errors.push(`第${rowNumber}行: 姓名不能为空`);
                                    return;
                                }
                                
                                if (!row['班级'] || !row['班级'].trim()) {
                                    errors.push(`第${rowNumber}行: 班级不能为空`);
                                    return;
                                }
                                
                                // 验证班级有效性
                                if (!Utils.isValidClass(row['班级'].trim())) {
                                    errors.push(`第${rowNumber}行: 班级"${row['班级']}"无效，请使用如"2023级1班"的格式`);
                                    return;
                                }
                                
                                // 处理用餐类型
                                const mealType = Utils.parseMealType(row['用餐类型'] || '');
                                
                                // 添加到学生列表
                                students.push({
                                    id: row['学号'].trim(),
                                    name: row['姓名'].trim(),
                                    class: row['班级'].trim(),
                                    mealPlan: mealType
                                });
                            });
                            
                            // 保存学生数据
                            importProgress.style.width = '80%';
                            importStatus.textContent = '正在保存数据...';
                            
                            const { newCount, updatedCount } = DataManager.saveStudents(students);
                            
                            // 完成导入
                            importProgress.style.width = '100%';
                            importStatus.textContent = '导入完成';
                            
                            setTimeout(() => {
                                importModal.classList.add('hidden');
                                loadStudentList();
                                
                                // 显示导入结果
                                const resultEl = document.getElementById('import-result');
                                const resultContent = document.getElementById('import-result-content');
                                
                                resultEl.classList.remove('hidden');
                                
                                if (errors.length > 0) {
                                    // 显示错误信息
                                    resultEl.className = 'mt-4 block';
                                    resultContent.className = 'p-4 rounded-md border border-danger bg-red-50';
                                    
                                    let errorHtml = `<p class="font-medium text-danger mb-2">导入完成，但发现${errors.length}个错误：</p>`;
                                    errorHtml += '<ul class="text-sm text-gray-700 list-disc pl-5">';
                                    errors.forEach(error => {
                                        errorHtml += `<li>${error}</li>`;
                                    });
                                    errorHtml += '</ul>';
                                    errorHtml += `<p class="mt-2 text-sm">成功导入: ${newCount} 名新学生，更新: ${updatedCount} 名学生信息</p>`;
                                    
                                    resultContent.innerHTML = errorHtml;
                                    Utils.showNotification(`导入完成，存在${errors.length}个错误`, 'warning');
                                } else {
                                    // 全部成功
                                    resultEl.className = 'mt-4 block';
                                    resultContent.className = 'p-4 rounded-md border border-success bg-green-50';
                                    resultContent.innerHTML = `<p class="text-success">成功导入 ${newCount} 名新学生，更新 ${updatedCount} 名学生信息</p>`;
                                    Utils.showNotification(`导入成功，共处理 ${students.length} 名学生信息`);
                                }
                                
                                // 5秒后自动隐藏结果提示
                                setTimeout(() => {
                                    resultEl.classList.add('hidden');
                                }, 10000);
                            }, 500);
                            
                        } catch (error) {
                            importModal.classList.add('hidden');
                            Utils.showNotification(`导入失败: ${error.message}`, 'error');
                            
                            // 显示错误详情
                            const resultEl = document.getElementById('import-result');
                            const resultContent = document.getElementById('import-result-content');
                            resultEl.classList.remove('hidden');
                            resultEl.className = 'mt-4 block';
                            resultContent.className = 'p-4 rounded-md border border-danger bg-red-50';
                            resultContent.innerHTML = `<p class="text-danger">${error.message}</p><p class="text-sm mt-1">请检查文件格式是否与模板一致</p>`;
                        }
                    };
                    
                    reader.readAsText(file);
                } else {
                    // 处理Excel文件（简化处理，实际应用中需要专门的Excel解析库）
                    setTimeout(() => {
                        importModal.classList.add('hidden');
                        Utils.showNotification('系统暂不直接支持Excel文件，请使用CSV格式或转换为CSV后导入', 'warning');
                    }, 1000);
                }
                
                // 清空文件输入，允许重复选择同一个文件
                e.target.value = '';
            });
            
            // 清空所有学生
            document.getElementById('clear-all-students').addEventListener('click', function() {
                if (confirm('确定要清空所有学生信息吗？此操作不可恢复！')) {
                    DataManager.clearAllStudents();
                    loadStudentList();
                    Utils.showNotification('所有学生信息已清空');
                }
            });
            
            // 添加单个学生
            document.getElementById('add-student').addEventListener('click', function() {
                const id = document.getElementById('student-id').value.trim();
                const name = document.getElementById('student-name').value.trim();
                const className = document.getElementById('student-class').value;
                const mealPlan = document.getElementById('student-meal-plan').value;
                
                if (!id) {
                    Utils.showNotification('学号不能为空', 'error');
                    document.getElementById('student-id').focus();
                    return;
                }
                
                if (!name) {
                    Utils.showNotification('姓名不能为空', 'error');
                    document.getElementById('student-name').focus();
                    return;
                }
                
                const student = {
                    id,
                    name,
                    class: className,
                    mealPlan
                };
                
                const result = DataManager.saveStudent(student);
                loadStudentList();
                
                // 清空表单
                document.getElementById('student-id').value = '';
                document.getElementById('student-name').value = '';
                document.getElementById('student-id').focus();
                
                if (result.updated) {
                    Utils.showNotification('学生信息已更新');
                } else {
                    Utils.showNotification('学生信息已添加');
                }
            });
            
            // 班级筛选
            document.getElementById('class-filter').addEventListener('change', loadStudentList);
            
            // 学生搜索
            document.getElementById('student-search').addEventListener('input', loadStudentList);
        }

        // 初始化请假表单
        function initLeaveForm() {
            // 班级选择变化时加载对应班级的学生
            document.getElementById('class-select').addEventListener('change', function() {
                const className = this.value;
                const studentSelect = document.getElementById('student-select');
                
                if (!className) {
                    studentSelect.innerHTML = '<option value="">请先选择班级</option>';
                    return;
                }
                
                const students = DataManager.getStudentsByClass(className);
                
                if (students.length === 0) {
                    studentSelect.innerHTML = '<option value="">该班级暂无学生信息，请先导入</option>';
                    return;
                }
                
                let options = '<option value="">请选择学生</option>';
                students.forEach(student => {
                    options += `<option value="${student.id}" data-meal-plan="${student.mealPlan}">${student.name}</option>`;
                });
                
                studentSelect.innerHTML = options;
            });
            
            // 学生选择变化时自动填充用餐类型
            document.getElementById('student-select').addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                const mealPlan = selectedOption.getAttribute('data-meal-plan');
                
                if (mealPlan) {
                    document.getElementById('meal-plan').value = mealPlan;
                }
            });
            
            // 全选/取消全选请假餐次
            document.querySelector('input[name="meal-type"][value="all-day"]').addEventListener('change', function() {
                const allDayChecked = this.checked;
                document.querySelectorAll('input[name="meal-type"][value!="all-day"]').forEach(checkbox => {
                    checkbox.checked = allDayChecked;
                    checkbox.disabled = allDayChecked;
                });
            });
            
            // 单个餐次选择时取消全选
            document.querySelectorAll('input[name="meal-type"][value!="all-day"]').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        const allDayCheckbox = document.querySelector('input[name="meal-type"][value="all-day"]');
                        allDayCheckbox.checked = false;
                        allDayCheckbox.disabled = true;
                        
                        // 检查是否所有单个餐次都被选中
                        const allSingleChecked = document.querySelectorAll('input[name="meal-type"][value!="all-day"]:checked').length === 3;
                        if (allSingleChecked) {
                            allDayCheckbox.checked = true;
                            document.querySelectorAll('input[name="meal-type"][value!="all-day"]').forEach(cb => {
                                cb.disabled = true;
                            });
                        }
                    } else {
                        document.querySelector('input[name="meal-type"][value="all-day"]').disabled = false;
                    }
                });
            });
            
            // 提交请假信息
            document.getElementById('submit-leave').addEventListener('click', function() {
                const className = document.getElementById('class-select').value;
                const studentId = document.getElementById('student-select').value;
                const studentName = document.getElementById('student-select').options[document.getElementById('student-select').selectedIndex].text;
                const date = document.getElementById('leave-date').value;
                const mealPlan = document.getElementById('meal-plan').value;
                const teacherName = document.getElementById('teacher-name').value.trim();
                
                // 获取选中的请假餐次
                const mealTypes = [];
                document.querySelectorAll('input[name="meal-type"]:checked').forEach(checkbox => {
                    mealTypes.push(checkbox.value);
                });
                
                // 验证表单
                if (!className) {
                    Utils.showNotification('请选择班级', 'error');
                    return;
                }
                
                if (!studentId) {
                    Utils.showNotification('请选择学生', 'error');
                    return;
                }
                
                if (!date) {
                    Utils.showNotification('请选择请假日期', 'error');
                    return;
                }
                
                if (mealTypes.length === 0) {
                    Utils.showNotification('请选择请假餐次', 'error');
                    return;
                }
                
                if (!teacherName) {
                    Utils.showNotification('请输入班主任姓名', 'error');
                    return;
                }
                
                // 构建请假信息对象
                const leave = {
                    className,
                    studentId,
                    studentName,
                    date,
                    mealTypes,
                    mealPlan,
                    reason: document.getElementById('leave-reason').value.trim(),
                    notes: document.getElementById('notes').value.trim(),
                    teacherName
                };
                
                // 保存请假信息
                DataManager.saveLeave(leave);
                
                // 更新最近请假记录列表
                loadRecentLeaves();
                
                // 重置表单
                document.getElementById('leave-date').value = '';
                document.querySelectorAll('input[name="meal-type"]').forEach(checkbox => {
                    checkbox.checked = false;
                    checkbox.disabled = false;
                });
                document.getElementById('leave-reason').value = '';
                document.getElementById('notes').value = '';
                
                Utils.showNotification('请假信息已提交成功');
            });
        }

        // 初始化报表生成功能
        function initReportGeneration() {
            // 生成报表
            document.getElementById('generate-report').addEventListener('click', function() {
                const month = document.getElementById('report-month').value;
                const schoolDays = parseInt(document.getElementById('school-days').value);
                const className = document.getElementById('report-class').value;
                
                if (!month) {
                    Utils.showNotification('请选择报表月份', 'error');
                    return;
                }
                
                if (!schoolDays || schoolDays < 1) {
                    Utils.showNotification('请输入有效的工作日天数', 'error');
                    return;
                }
                
                // 获取符合条件的学生
                let students = DataManager.getStudents();
                if (className !== 'all') {
                    students = students.filter(student => student.class === className);
                }
                
                if (students.length === 0) {
                    Utils.showNotification('没有找到符合条件的学生信息', 'warning');
                    return;
                }
                
                // 计算报表数据
                let totalStudents = 0;
                let totalAmount = 0;
                let totalLeaveDays = 0;
                let totalDeduction = 0;
                const reportDetails = [];
                
                students.forEach(student => {
                    // 获取该学生当月的请假记录
                    const leaves = DataManager.getLeavesByStudent(student.id, month);
                    
                    // 计算请假天数（去重）
                    const leaveDates = new Set();
                    leaves.forEach(leave => {
                        leaveDates.add(leave.date);
                    });
                    const leaveDays = leaveDates.size;
                    
                    // 计算餐费
                    const dailyPrice = Utils.getMealPrice(student.mealPlan);
                    const totalPrice = dailyPrice * schoolDays;
                    const deduction = dailyPrice * leaveDays;
                    const payable = totalPrice - deduction;
                    
                    // 累计统计数据
                    totalStudents++;
                    totalAmount += totalPrice;
                    totalLeaveDays += leaveDays;
                    totalDeduction += deduction;
                    
                    // 添加到报表详情
                    reportDetails.push({
                        id: student.id,
                        name: student.name,
                        class: student.class,
                        mealType: Utils.getMealTypeText(student.mealPlan),
                        leaveDays,
                        deduction,
                        payable
                    });
                });
                
                // 按班级和学号排序
                reportDetails.sort((a, b) => {
                    if (a.class !== b.class) {
                        return a.class.localeCompare(b.class);
                    }
                    return a.id.localeCompare(b.id);
                });
                
                // 显示报表
                document.getElementById('report-title').textContent = `${month} 学生餐费报表`;
                document.getElementById('total-students').textContent = totalStudents;
                document.getElementById('total-amount').textContent = `¥${totalAmount.toFixed(2)}`;
                document.getElementById('total-leave-days').textContent = totalLeaveDays;
                document.getElementById('total-deduction').textContent = `¥${totalDeduction.toFixed(2)}`;
                document.getElementById('report-date').textContent = new Date().toLocaleDateString();
                
                // 填充报表详情
                const reportDetailsEl = document.getElementById('report-details');
                reportDetailsEl.innerHTML = '';
                
                reportDetails.forEach(detail => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">${detail.id}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${detail.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${detail.class}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${detail.mealType}</td>
                        <td class="px-6 py-4 whitespace-nowrap">${detail.leaveDays}</td>
                        <td class="px-6 py-4 whitespace-nowrap">¥${detail.deduction.toFixed(2)}</td>
                        <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">¥${detail.payable.toFixed(2)}</td>
                    `;
                    reportDetailsEl.appendChild(row);
                });
                
                // 显示报表结果区域
                document.getElementById('report-result').classList.remove('hidden');
                
                Utils.showNotification('报表生成成功');
            });
            
            // 打印报表
            document.getElementById('print-report').addEventListener('click', function() {
                window.print();
            });
            
            // 导出报表
            document.getElementById('export-report').addEventListener('click', function() {
                // 生成CSV报表
                const reportTitle = document.getElementById('report-title').textContent;
                const reportDate = document.getElementById('report-date').textContent;
                const totalStudents = document.getElementById('total-students').textContent;
                const totalAmount = document.getElementById('total-amount').textContent;
                const totalLeaveDays = document.getElementById('total-leave-days').textContent;
                const totalDeduction = document.getElementById('total-deduction').textContent;
                
                // 收集表格数据
                let csvContent = `${reportTitle}\n`;
                csvContent += `生成日期: ${reportDate}\n\n`;
                csvContent += `统计信息,值\n`;
                csvContent += `总学生数,${totalStudents}\n`;
                csvContent += `总应收金额,${totalAmount}\n`;
                csvContent += `总请假天数,${totalLeaveDays}\n`;
                csvContent += `总减免金额,${totalDeduction}\n\n`;
                
                // 添加明细数据
                csvContent += `学号,姓名,班级,用餐类型,请假天数,减免金额,应付金额\n`;
                
                document.querySelectorAll('#report-details tr').forEach(row => {
                    const cells = row.querySelectorAll('td');
                    if (cells.length === 7) {
                        const id = cells[0].textContent;
                        const name = cells[1].textContent;
                        const className = cells[2].textContent;
                        const mealType = cells[3].textContent;
                        const leaveDays = cells[4].textContent;
                        const deduction = cells[5].textContent.replace('¥', '');
                        const payable = cells[6].textContent.replace('¥', '');
                        
                        csvContent += `${id},${name},${className},${mealType},${leaveDays},${deduction},${payable}\n`;
                    }
                });
                
                // 下载CSV文件
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.setAttribute('href', url);
                link.setAttribute('download', `${reportTitle.replace(/\s+/g, '_')}.csv`);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                Utils.showNotification('报表已导出为CSV文件');
            });
        }

        // 加载最近请假记录
        function loadRecentLeaves() {
            const leaves = DataManager.getLeaves();
            const recentLeavesEl = document.getElementById('recent-leaves');
            
            // 按创建时间排序，取最近10条
            const sortedLeaves = leaves.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 10);
            
            if (sortedLeaves.length === 0) {
                recentLeavesEl.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无请假记录</td></tr>';
                return;
            }
            
            recentLeavesEl.innerHTML = '';
            
            sortedLeaves.forEach(leave => {
                // 格式化请假餐次文本
                let mealTypesText = '';
                leave.mealTypes.forEach(type => {
                    switch(type) {
                        case 'breakfast': mealTypesText += '早餐 '; break;
                        case 'lunch': mealTypesText += '午餐 '; break;
                        case 'dinner': mealTypesText += '晚餐 '; break;
                        case 'all-day': mealTypesText += '全天 '; break;
                    }
                });
                
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">${leave.date}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${leave.className}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${leave.studentName}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${mealTypesText}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-danger hover:text-danger/80 delete-leave" data-id="${leave.id}">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                `;
                recentLeavesEl.appendChild(row);
            });
            
            // 添加删除请假记录事件监听
            document.querySelectorAll('.delete-leave').forEach(button => {
                button.addEventListener('click', function() {
                    const leaveId = this.getAttribute('data-id');
                    if (confirm('确定要删除这条请假记录吗？')) {
                        DataManager.deleteLeave(leaveId);
                        loadRecentLeaves();
                        Utils.showNotification('请假记录已删除');
                    }
                });
            });
        }

        // 加载学生列表
        function loadStudentList() {
            const classFilter = document.getElementById('class-filter').value;
            const searchTerm = document.getElementById('student-search').value.toLowerCase();
            const studentListEl = document.getElementById('student-list');
            
            let students = DataManager.getStudents();
            
            // 应用筛选
            if (classFilter !== 'all') {
                students = students.filter(student => student.class === classFilter);
            }
            
            // 应用搜索
            if (searchTerm) {
                students = students.filter(student => 
                    student.name.toLowerCase().includes(searchTerm) || 
                    student.id.toLowerCase().includes(searchTerm)
                );
            }
            
            if (students.length === 0) {
                studentListEl.innerHTML = '<tr><td colspan="5" class="px-6 py-4 text-center text-gray-500">暂无学生信息</td></tr>';
                return;
            }
            
            // 按班级和学号排序
            students.sort((a, b) => {
                if (a.class !== b.class) {
                    return a.class.localeCompare(b.class);
                }
                return a.id.localeCompare(b.id);
            });
            
            studentListEl.innerHTML = '';
            
            students.forEach(student => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">${student.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${student.name}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${student.class}</td>
                    <td class="px-6 py-4 whitespace-nowrap">${Utils.getMealTypeText(student.mealPlan)}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <button class="text-primary hover:text-primary/80 edit-student mr-3" data-id="${student.id}">
                            <i class="fa fa-pencil"></i> 编辑
                        </button>
                        <button class="text-danger hover:text-danger/80 delete-student" data-id="${student.id}">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    </td>
                `;
                studentListEl.appendChild(row);
            });
            
            // 添加编辑学生事件监听
            document.querySelectorAll('.edit-student').forEach(button => {
                button.addEventListener('click', function() {
                    const studentId = this.getAttribute('data-id');
                    const students = DataManager.getStudents();
                    const student = students.find(s => s.id === studentId);
                    
                    if (student) {
                        document.getElementById('student-id').value = student.id;
                        document.getElementById('student-name').value = student.name;
                        document.getElementById('student-class').value = student.class;
                        document.getElementById('student-meal-plan').value = student.mealPlan;
                        
                        // 滚动到添加学生区域
                        document.getElementById('student-id').scrollIntoView({ behavior: 'smooth' });
                        document.getElementById('student-id').focus();
                    }
                });
            });
            
            // 添加删除学生事件监听
            document.querySelectorAll('.delete-student').forEach(button => {
                button.addEventListener('click', function() {
                    const studentId = this.getAttribute('data-id');
                    if (confirm('确定要删除这个学生吗？相关的请假记录也会保留。')) {
                        DataManager.deleteStudent(studentId);
                        loadStudentList();
                        Utils.showNotification('学生信息已删除');
                    }
                });
            });
        }
    </script>
</body>
</html>
    